<template>
<div class="dialog-customer-box">
  <!-- dialog-customer begin -->
  <el-dialog
    width="68%"
    title="客户档案"
    class="dialog-customer"
    :close-on-click-modal="false"
    :visible.sync="dialogShow"
    @close="onHide()">
    <el-tabs class="dialog-tabs-out" type="border-card" v-model="activeName">
      <el-tab-pane name="first" label="基本信息">
        <el-form
          ref="dialogForm"
          class="dialogForm"
          label-width="78px"
          :rules="rules"
          :model="dialogForm">
          <el-form-item v-show="false" prop="id">
            <el-input type="hidden" v-model="dialogForm.id"></el-input>
          </el-form-item>
          <div class="part-title">
            <h4 class="title-name">基本信息</h4>
          </div>
          <el-row :gutter="10">
            <el-col :span="18">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="客户编号" prop="cusCode">
                    <el-input v-model="dialogForm.cusCode" placeholder="为空自动编号" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户名称" prop="cusName">
                    <el-input v-model="dialogForm.cusName" placeholder="请输入客户名称" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户简称" prop="cusAbbName">
                    <el-input v-model="dialogForm.cusAbbName" placeholder="请输入客户简称" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="业务类型" prop="busType">
                    <dg-dict-select dictType="customer_type" v-model="dialogForm.busType" clearable></dg-dict-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户类型" prop="cusType">
                    <dg-dict-select dictType="customer_type" v-model="dialogForm.cusType" clearable></dg-dict-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="业务姓名" prop="salesmanOne">
                    <el-input v-model="dialogForm.salesmanOne" placeholder="请输入业务员姓名" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="对接平台" prop="ediPlatformObj">
                    <dg-service-select
                      class="w-full"
                      placeholder="对接平台"
                      v-model="dialogForm.ediPlatformObj"
                      :dataType="30000"
                      :serviceParams="{ busType: 1 }"
                      isObject
                      filterable
                      clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系人" prop="cusPerson">
                    <el-input v-model="dialogForm.cusPerson" placeholder="请输入联系人" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系电话" prop="cusPhone">
                    <el-input v-model="dialogForm.cusPhone" placeholder="请输入联系电话" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="详细地址" prop="companyAddress">
                    <el-input type="textarea" v-model="dialogForm.companyAddress" placeholder="详细地址" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="客户备注" prop="remarks">
                    <el-input type="textarea" v-model="dialogForm.remarks" placeholder="请输入备注，50字内，非必填" maxlength="50" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户Logo" prop="logo">
                <dg-file-upload
                  class="upload-logo"
                  :show-file-list="false"
                  :fileDataList.sync="dialogForm.logo"
                  uploadType="picture">
                </dg-file-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="part-title">
            <h4 class="title-name">结算信息</h4>
          </div>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="结算币种" prop="currency">
                <dg-dict-select
                  dictType="currency_type"
                  v-model="dialogForm.currency"
                  clearable>
                </dg-dict-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算方式" prop="settlementMethod">
                <dg-dict-select
                  dictType="payment_terms"
                  v-model="dialogForm.settlementMethod"
                  clearable>
                </dg-dict-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算周期" prop="settlementPeriod">
                <el-input v-model="dialogForm.settlementPeriod" placeholder="请输入结算周期" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付方式" prop="paymentMethod">
                <dg-dict-select
                  dictType="pay_type"
                  v-model="dialogForm.paymentMethod"
                  clearable>
                </dg-dict-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="发票种类" prop="invoicingType">
                <dg-dict-select
                  dictType="invoice_type"
                  v-model="dialogForm.invoicingType"
                  clearable>
                </dg-dict-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票抬头" prop="invTitle">
                <el-input v-model="dialogForm.invTitle" placeholder="请输入发票抬头" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开票税号" prop="taxpayerNumber">
                <el-input v-model="dialogForm.taxpayerNumber" placeholder="请输入开票税号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账号" prop="invBankNum">
                <el-input v-model="dialogForm.invBankNum" placeholder="请输入银行账号" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="开户银行" prop="invBankName">
                <el-input v-model="dialogForm.invBankName" placeholder="请输入开户银行" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="财务姓名" prop="financePerson">
                <el-input v-model="dialogForm.financePerson" placeholder="请输入财务姓名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="财务电话" prop="financeMobile">
                <el-input v-model="dialogForm.financeMobile" placeholder="请输入财务电话" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div v-if="activeName=='first'" slot="footer" class="footer">
      <el-button type="primary" :loading="dialogLoading" @click="handleSubmit()">确 定</el-button>
      <el-button :loading="dialogLoading" @click="onHide()">取 消</el-button>
    </div>
  </el-dialog>
  <!-- dialog-customer end -->
</div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
// import TabAccount from '@/views/system/archives/components/tab-account';
// import TabCustomerProduct from '@/views/system/archives/components/tab-customer-product';
// import TabCustomerShipper from '@/views/system/archives/components/tab-customer-shipper';
// import TabCustomerConsignee from '@/views/system/archives/components/tab-customer-consignee';
// import TabCustomerWarehouse from '@/views/system/archives/components/tab-customer-warehouse';
import * as API_Customer from '@/api/archives/customer';

export default {
  name: 'DialogCustomer',
  components: {
    // TabAccount,
    // TabCustomerProduct,
    // TabCustomerShipper,
    // TabCustomerConsignee,
    // TabCustomerWarehouse
  },
  mixins: [mixin],
  props: {
    // 弹层显示
    show: {
      type: Boolean,
      default: false
    },
    // 弹层类型
    type: {
      type: String,
      default: 'new'
    },
    // 客户id
    id: {
      type: String,
      default: undefined
    },
    // 客户orgId
    orgId: {
      type: String,
      default: undefined
    }
  },
  data() {
    // 检验不少于 4 个字符的数字或字母
    const checkCusCode = (rule, value, callback) => {
      const _reg = /^[\w+$]{4,100}$/;
      if ((value || value === 0)&&!_reg.test(value)) {
        callback(new Error('请输入不少于 4 位的数字、字母'));
      } else {
        callback();
      };
    };
    return {
      dialogLoading: false,
      dialogShow: false,
      activeName: 'first',
      hasSelectId: undefined,
      // 基本信息
      dialogForm: {
        id: undefined,
        cusCode: undefined,
        cusName: undefined,
        cusAbbName: undefined,
        salesmanOne: undefined,
        cusType: undefined,
        busType: undefined,
        cusPerson: undefined,
        cusPhone: undefined,
        companyAddress: undefined,
        companyNature: undefined,
        cusPersonOrg: undefined,
        cusEmail: undefined,
        cusWechat: undefined,
        settlementMethod: undefined,
        paymentMethod: undefined,
        settlementPeriod: undefined,
        invoicingType: undefined,
        taxpayerNumber: undefined,
        invConpanyPhone: undefined,
        invTitle: undefined,
        invBankName: undefined,
        invBankNum: undefined,
        remarks: undefined,
        currency: undefined,
        financePerson: undefined,
        financeMobile: undefined,
        ediPlatformObj: undefined,
        ediPlatformId: undefined,
        ediPlatformName: undefined
      },
      rules: {
        cusCode: [
          { required: false, validator: checkCusCode, trigger: 'blur' }
        ],
        cusName: [
          {
            required: true,
            message: '请输入客户名称',
            trigger: ['blur', 'change']
          }
        ],
        cusAbbName: [
          {
            required: true,
            message: '请输入客户简称',
            trigger: ['blur', 'change']
          }
        ],
        currency: [
          {
            required: true,
            message: '请选择币种',
            trigger: ['blur', 'change']
          }
        ]
      }
    };
  },
  watch: {
    /**
     * @date 2024/05/17
     * @author wolfMan
     * @description {弹层显示}
     */
    show (_newVal) {
      this.resetForm('dialogForm');
      if (_newVal) {
        this.hasSelectId = this.id;
        this.dialogShow = _newVal;
        if (this.type === 'new') {
          this.activeName = 'first';
        } else {
          this.activeName = this.type;
          if (this.type === 'first') {
            this.getDetailData();
          }
        }
      } else {
        this.dialogShow = _newVal;
      }
    },
    /**
     * @date 2024/05/17
     * @author wolfMan
     * @description {tab 切换}
     */
    activeName(_newVal) {
      if (_newVal === 'first' && (this.id || this.id === 0)) {
        this.getDetailData();
      }
    }
  },
  methods: {
    /**
     * @date 2024/05/17
     * @author wolfMan
     * @description {关闭弹层}
     */
    onHide() {
      this.$emit('update:show', false);
      this.hasSelectId = undefined;
    },
    /**
     * @date 2024/05/17
     * @author wolfMan
     * @description {获取客户详情}
     */
    getDetailData() {
      this.dialogLoading = true;
      let _params = {
        id: this.id
      };
      API_Customer.queryCustomerById(_params)
        .then(response => {
          // 数据请求成功
          if (response.success) {
            this.dialogShow = true;
            let _useData = response.data || {};
            let _formData = {};
            let formKeys = Object.keys(this.dialogForm);
            formKeys.forEach(key => {
              if (key === 'ediPlatformObj') {
                _formData[key] = {
                  valueShow: _useData.ediPlatformId,
                  labelShow: _useData.ediPlatformName
                };
              } else {
                _formData[key] = _useData[key];
              }
            });
            this.$nextTick(() => {
              this.dialogForm = _formData;
            });
          } else {
            this.$modal.msgError(response.msg);
          }
        })
        .always(() => {
          this.dialogLoading = false;
        });
    },
    /**
     * @date 2024/05/17
     * @author wolfMan
     * @description {基本信息提交}
     */
    handleSubmit() {
      this.$refs['dialogForm'].validate(valid => {
        if (valid) {
          this.dialogLoading = true;
          let _params = this.MixinClone(this.dialogForm);
          // 国家信息
          if (!_params.ediPlatformObj || !_params.ediPlatformObj.valueShow) {
            _params.ediPlatformId = '';
            _params.ediPlatformName = '';
          } else {
            _params.ediPlatformId = _params.ediPlatformObj.valueShow;
            _params.ediPlatformName = _params.ediPlatformObj.labelShow;
          }
          delete _params.ediPlatformObj;

          let _service = API_Customer.addCustomer;
          if (this.type !== 'new') {
            _params.id = this.id;
            _service = API_Customer.updateCustomer;
          }
          _service(_params)
            .then(response => {
              if (response && response.success) {
                this.$modal.msgSuccess(response.msg);
                this.hasSelectId = response.data.id;
              } else {
                this.$modal.msgError(response.msg);
              }
            })
            .always(() => {
              this.dialogLoading = false;
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.dialog-customer {
  .upload-logo {
    .dg-upload {
      .el-upload--picture-card {
        width: 189px;
        height: 189px;
        line-height: 189px;
      }
    }
  }
  .top-search {
    padding-bottom: 5px;
    .search-form {
      padding-right: 0;
    }
    .el-form-item {
      width: 25%;
    }
  }
  .footer {
    text-align: center;
  }
}
</style>